import React from 'react'
import styles from './index.module.css'
import cart1 from "../../../assets/cart1.jpg"
import {Picker, Toast} from 'antd-mobile'
import Nav from '../../../components/nav'
import {withRouter} from 'react-router-dom'
import wxImg from '../../../assets/golive/pic_wx.png'
import yeImg from '../../../assets/golive/pic_ye.png'
import {connect} from "react-redux";
import request from "../../../utils/request";

const PayWay = (props) => {
    return (
        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px'}}>
            <img src={props.icon} alt="支付方式图片" style={{height: '28px', marginRight: '5px'}}/>
            <b>{props.title}</b>
        </div>
    );
};

const colors = [
    {
        label:
            (<PayWay icon={wxImg} title={"微信支付"} key={1}/>),
        value: 1,
    },
    {
        label:
            (<PayWay icon={yeImg} title={"余额支付"} key={2}/>),
        value: 2,
    },
];


const Address = ({info}) => {
    return (
        <>
            <div className={styles.addressTitle}>
                <div>
                    <b style={{
                        borderRight: '1px solid #E8E8E8',
                        paddingRight: '10px'
                    }}>{info["username"] || ''}</b>
                    <b style={{
                        paddingLeft: '10px'
                    }}>{info["userPhone"] || ''}</b>
                </div>
                <i className={"iconfont icon-right"} style={{
                    color: '#999999',
                    marginRight: '5px',
                    fontSize: '14px'
                }}/>
            </div>
            <div className={styles.addressContent}>
                {info["addressFull"] || ''}
            </div>
        </>
    );
};

const PayPicker = props => {

    return (
        <div
            onClick={props.onClick}
            style={{backgroundColor: '#fff'}}
        >
            <div style={{display: 'flex', height: '22px', lineHeight: '22px'}}>
                <div style={{
                    flex: 1,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                }}>{props.children}
                </div>
                <div style={{textAlign: 'right', color: '#888', marginRight: 15}}>{props.extra}</div>
            </div>
        </div>
    );
};

const Product = ({item}) => {
    const {AttributeName,Product,price} = item;
    return (
        <div className={styles.summary}>
            <img src={cart1} alt=""/>
            <div style={{
                padding: '2px 0 2px 10px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
            }}>
                <b>{Product.name}</b>
                <span>{AttributeName}</span>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <b style={{marginRight: '10px'}}>¥{price}</b>
                </div>
            </div>
        </div>
    );
};


class Index extends React.Component {

    state = {
        couponCount: 0,
        totalAmount: 0,
        skuList: [],
    };


    choseCoupon = () => {
        const {history} = this.props;
        history.push('/me/coupon');
    };

    componentDidMount() {
        const {dispatch, order} = this.props;
        console.log("order1234");
        console.log(order);
        request(`/order/checkout`, {
            method: 'POST',
            data: {productList: order.productList, CouponId: order.selectedCoupon ? order.selectedCoupon["id"] : 0}
        }).then((result) => {
            const {defaultAddress, couponCount, totalAmount, skuList} = result.data;
            if (defaultAddress !== null && !order.selectedAddress) {
                dispatch({
                    type: 'order-selectedAddress-save',
                    payload: defaultAddress
                })
            }
            this.setState({couponCount, totalAmount, skuList});
        }).catch(() => {
            Toast.fail('请求失败')
        });
    }

    submitOrder = () => {
        const {history, order} = this.props;
        const {totalAmount} = this.state;
        const data = {
            dispatchAddress: order.selectedAddress["addressFull"],
            couponId: order.selectedCoupon ? order.selectedCoupon.id : null,
            payWay: 1,
            remark: order.remark,
            payAmount: totalAmount,
            skuList: order.productList,
        };

        request(`/order/place-order`, {
            method: 'POST',
            data,
        }).then((result) => {
            console.log(result);
            history.push('/pay');
        }).catch(() => {

        });
    };

    render() {
        const {history, dispatch, order} = this.props;
        const {totalAmount} = this.state;
        return (
            <div className={styles.container}>
                <Nav onLeftClick={() => {
                    history.goBack();
                }}/>

                {
                    this.state.skuList.map((item, inx) => {
                        return <Product key={inx} item={item}/>
                    })
                }

                <div className={styles.address} onClick={() => {
                    history.push('/me/addr/list');
                }}>
                    {!order.selectedAddress ? <div>新建地址</div> : <Address info={order.selectedAddress}/>}
                </div>

                <div className={styles.operate}>
                    <div className={styles.operateLeftRight}>运费<b>¥20</b></div>
                    <div className={styles.operateLeftRight} onClick={this.choseCoupon}>
                        优惠卷
                        <div style={{color: 'red'}}>
                            {
                                order.selectedCoupon ?
                                    (order["selectedCoupon"]["name"] + ' -' + order["selectedCoupon"]["discount"])
                                    : this.state.couponCount + ' 张优惠卷'
                            }
                            <i className={"iconfont icon-right"} style={{color: '#999999', fontSize: '0.8rem'}}/>
                        </div>
                    </div>
                    <div className={styles.operateLeftRight}>
                        订单备注
                        <input type="text" placeholder={"请输入订单备注"} style={{
                            border: 'none'
                        }} onChange={(event) => {
                            dispatch({
                                type: 'order-remark-save',
                                payload: event.target.value
                            });
                        }} value={order.remark}/>
                    </div>
                </div>
                <div className={styles.bottom}>
                    <div style={{
                        color: '#A0A0A0'
                    }}>
                        共3件 合计 <b style={{color: 'red'}}>¥{totalAmount}</b>
                    </div>
                    <button className={styles.submitBtn} onClick={this.submitOrder}>提交订单</button>
                </div>
            </div>
        );
    }
}

export default connect((state) => ({
    order: state.order,
}), (dispatch) => ({
    dispatch
}))(withRouter(Index))
